<template>
    <div class="login_wrap">
        <div class="login_form">
            <img src="../../assets/logo.png" alt="" class="logo">
            <p class="title">良信智能</p>
            <el-form>
                <el-input v-model="authInfo.username" placeholder="用户名" class="input_box"></el-input>
                <el-input v-model="authInfo.psd" placeholder="密码" class="input_box error">
                    <template slot="append">
                        <img src="../../assets/eye.png" alt="" class="eye">
                    </template>
                </el-input>
                <a href="javascript:;" class="link" @click="forgotPsd">忘记密码？</a>
                <el-button class="submit_btn" @click="submit">确认</el-button>
            </el-form>
        </div>
        <p class="copyright">©2016-2017上海良信电器股份有限公司沪ICP备17037559号-1版权所有</p>
        <el-dialog 
            title="忘记密码"
            :visible.sync="forgotpsd"
            custom-class="psd_modal"
        >
        <p>请将智能中控面板后复位键
按住3秒以上，进行还原。</p>
<p>或联系良信客服：021-68586699</p>
        <el-button type="primary" @click="forgotpsd=false">我知道了</el-button>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            authInfo:{
                username:'',
                psd:'密码输入错误'
            },
            forgotpsd:false,
        }
    },
    methods:{
        forgotPsd(){
            this.forgotpsd = true;
        },
        submit(){
            this.$router.push('/home');
            // this.$refs['loginForm'].validate((valid) => {

            // })
        }
    }
}
</script>
<style lang="less" >
@import url('./login.less');
.error{
    background: rgba(0,0,0,.18);
}
.psd_modal{
    width: 338px;
    p{
        font-size: 14px;
        color: #000;
    }
    .el-button--primary{
        width: 100%;
        margin-top: 20px;
        background-color: #30BBF7;
        border-color:#30BBF7;
        &:hover{
            background-color: #30BBF7;
            border-color:#30BBF7;
        }
    }
}
</style>


